<template>
    <section :style="{
        backgroundColor: confDiy.bgColor
    }">
        <div class="m-auto px-10">
            <div class="flex items-center py-7">
                <el-image
                    v-if="confDiy.loginImage === '1'"
                    :src="appStore.toAbsoluteUrl(confDiy.loginImage)"
                    :lazy="true"
                    class="shrink-0 w-[120px] h-[50px] mr-8"
                />

                <div class="flex-1 place-self-start mr-8">
                    <div v-if="dataDiy.length > 0" class="flex gap-8">
                        <template  v-for="(item, index) in dataDiy">
                            <a
                                v-if="item.isEnable"
                                :key="index"
                                class="text-xl hover:opacity-80"
                                :style="{ color: confDiy.linkColor }"
                            >
                                {{ item.name }}
                            </a>
                        </template>
                    </div>

                    <p
                        v-if="confDiy.description"
                        class="mt-5 text-lg leading-7"
                        :style="{ color: confDiy.descColor }"
                    >
                        {{ confDiy.description }}
                    </p>
                </div>

                <div class="flex items-center gap-10">
                    <div v-if="confDiy.imgUrlOne">
                        <el-image
                            :src="appStore.toAbsoluteUrl(confDiy.imgUrlOne)"
                            class="w-[130px] h-[130px] rounded-sm"
                            :alt="confDiy.imgNameOne"
                            :lazy="true"
                        />
                        <p class="text-center" :style="{ color: confDiy.someColor }">
                            {{ confDiy.imgNameOne }}
                        </p>
                    </div>
                    <div v-if="confDiy.imgUrlTow">
                        <el-image
                            :src="appStore.toAbsoluteUrl(confDiy.imgUrlTow)"
                            class="w-[130px] h-[130px] rounded-sm"
                            :alt="confDiy.imgNameTow"
                            :lazy="true"
                        />
                        <p class="text-center" :style="{ color: confDiy.someColor }">
                            {{ confDiy.imgNameTow }}
                        </p>
                    </div>
                </div>
            </div>

            <div
                v-if="confDiy.isShowRigs"
                class="leading-[70px] text-center border-t border-dashed"
                :style="{
                    color: confDiy.rigsColor,
                    borderColor: confDiy.brColor
                }"
            >
                {{ copyright }}
            </div>
        </div>
    </section>
</template>

<script setup lang="ts">
import type { FooterConfigType, FooterDataType } from '../index.ts'
import useAppStore from '@/stores/modules/app'

const props = defineProps({
    diyData: {
        type: Object,
        default: () => ({
            config: {} as FooterConfigType,
            data: [] as FooterDataType[]
        })
    }
})

const appStore = useAppStore()
const copyright = computed(() => appStore.getSysConfig.copyright)

// 装修数据
const confDiy = ref({} as FooterConfigType)
const dataDiy = ref([] as FooterDataType[])

// 监听数据
watch(
    () => props.diyData,
    (val) => {
        confDiy.value = val.config
        dataDiy.value = val.data
    }, { immediate: true }
)
</script>
